<template>
  <main class="page">
    <PageBanner :bg_url="page.banner" />
    <div
      class="page-category sticky"
      v-scroll-spy-active="{selector: 'a.term-item'}"
      v-scroll-spy-link="{selector: 'a.term-item'}">
      <span class="title">{{cate.title}}</span>
      <a
        class="term-item"
        v-for="(val,k) of page.category"
        :href="`#${k+1}`"
        :key="k"
        @click.prevent="$scrollTo(k)"
      >{{val.term}}</a>
    </div>

    <div v-scroll-spy="{offset: 140, allowNoActive: false}">
      <section class="section-container">
        <div class="section-wrap">
          <h2 class="spec-title" v-html="page.criteria.title"></h2>
          <p class="spec-intro" v-text="page.criteria.intro"></p>
          <ul class="list juryinfo">
            <li class="list-item" v-for="(item,key) of page.juryc" :key="key">
              <div class="inner-item">
                <h3 class="item-title">{{item.title}}</h3>
                <div class="item-intro" v-html="item.intro"></div>
              </div>
            </li>
          </ul>
        </div>
      </section>
      <section class="section-container">
        <h2 class="spec-title" v-html="page.process.title"></h2>
        <p class="spec-intro" v-text="page.process.intro"></p>
        <ul class="list jury-process">
          <li class="list-item" v-for="(item,key) of page.juryp" :key="key">
            <div class="inner-item">
              <span class="item_num">{{item.num}}</span>
              <h4 class="item-number">{{item.num}}</h4>
              <h3 class="item-title">{{item.title}}</h3>
              <div class="item-intro" v-html="item.intro"></div>
            </div>
          </li>
        </ul>
      </section>
      <section class="section-container">
        <h2 class="spec-title" v-html="page.report.title"></h2>
        <p class="spec-intro" v-text="page.report.intro"></p>
      </section>
    </div>
  </main>
</template>
<script>
export default {
  name: "JuryInfo",
  data() {
    return {
      page: {
        banner: {
          "background-image": `url(${require("@/assets/img/judging.jpg")})`
        },
        category: [
          {
            route: "JuryPanel",
            param: { year: 2019 },
            term: "Judging Criteria"
          },
          {
            route: "JuryPanel",
            param: { year: 2017 },
            term: "Judging Process"
          },
          {
            route: "JuryPanel",
            param: { year: 2015 },
            term: "Jury Report"
          }
        ],
        criteria: {
          title: `<span>JUDGING</span> CRITERIA`,
          intro:
            "Judging criteria include but are not limited to the following:"
        },
        process: {
          title: `<span>JUDGING</span> PROCESS`,
          intro:
            "The judging process will consist of two stages of detailed assessments, based on the actual products, images and additional supporting materials submitted by the entrants."
        },
        report: {
          title: `<span>JURY</span> REPORT`,
          intro:
            "Jury report will be available 1-3 weeks after shortlist is announced. Stay tuned."
        },
        juryc: [
          {
            title: "01",
            intro:
              "Achievement in utilizing designs to increase sales…roduct qualities, productivity and profitability."
          },
          {
            title: "02",
            intro:
              "Achievement in utilizing designs to enhance sustai…pment, and to improve quality of lives in cities."
          },
          {
            title: "03",
            intro:
              "Achievement in utilizing designs to contribute to …f social development, and of cities’ development."
          },
          {
            title: "04",
            intro:
              "Achievement in developing cultural diversity based on traditional cultures."
          },
          {
            title: "05",
            intro:
              "International recognition, commercial and societal success in designs."
          },
          {
            title: "06",
            intro:
              "Achievement in uniqueness, creativity, originality… use of technology, user-friendliness in designs."
          }
        ],
        juryp: [
          {
            title: "First Stage",
            intro:
              "First Stage Judging will be carried out by the nominators according to the judging criteria listed above. Each nominator will decide how many entrants it will recommend.",
            num: "01"
          },
          {
            title: "Second Stage",
            intro:
              "An International Jury would convene in Shenzhen. Actual design works and supporting materials will be displayed side by side for the jurors to evaluate. All award winners will be selected at the end of the second stage.",
            num: "02"
          }
        ]
      },
      cate: {
        title: "Judging Info"
      }
    };
  }
};
</script>
<style lang="scss" scoped>
.section-container {
  text-align: center;
  &:nth-child(2) {
    background-color: $primary;
    color: #fff;
    p.spec-intro {
      color: #fff;
    }
    ul.jury-process {
      margin: 80px 40px 0 40px;
      li.list-item {
        width: 50%;
        color: #202020;
        .inner-item {
          background-color: #fff;
          height: 410px;
          padding: 40px 40px 0;
          position: relative;
          margin: 0 20px;
          &::after {
            content: "\e604";
            position: absolute;
            top: 20px;
            right: 20px;
            font-family: "iconfont";
            font-size: 16px;
            color: #2537b5;
          }
          .item_num {
            position: absolute;
            right: 0.1em;
            bottom: 0.1em;
            font: 700 280px/1 "sans-serif";
            color: transparent;
            -webkit-text-stroke: 2px gray;
            opacity: 0.1;
          }
        }
      }
    }
  }
  h2.spec-title {
    font-size: 38px;
    font-weight: 300;
    letter-spacing: 0.03em;
    /deep/ span {
      font-family: sans-serif;
      font-weight: 700;
    }
  }
  p.spec-intro {
    display: block;
    margin: auto;
    max-width: 900px;
    color: grey;
    font: 500 20px/40px "Futura";
    letter-spacing: 0.01em;
    margin-top: 30px;
  }
  ul.list {
    margin-top: 80px;
    li.list-item {
      display: inline-block;
      vertical-align: top;
      width: 33.3%;
      text-align: left;
      &:nth-child(n + 4) {
        margin-top: 60px;
      }
      .inner-item {
        border-top: 1px solid #dbdbdb;
        padding: 20px 20px 0;
        margin: 0 20px;
        .item-title {
          margin-top: 0.25em;
          font: 700 24px/1.65 "sans-serif";
          letter-spacing: 0.02em;
          margin-bottom: 30px;
        }
        .item-intro {
          font: 500 18px/30px "Futura";
          letter-spacing: 0.02em;
          color: gray;
        }
      }
    }
  }
}
</style>